<template>
	<view class="wrap">
		<page-nav :title="desc"></page-nav>
		<u-form :model="form" ref="uForm" label-width="auto">
			<u-form-item label="姓名">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="身份证">
				<u-input v-model="form.card" />
			</u-form-item>
			<u-form-item label="手机号">
				<u-input v-model="form.phoneNumber" />
			</u-form-item>
			<u-form-item label="邮箱">
				<u-input v-model="form.email" />
			</u-form-item>
			<u-form-item label="参保地区">
				<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="canbao_confirm"></u-select>
				<u-input :border=false type="select" :select-open="show" v-model="region" placeholder="请选择地区"
					@click="show = true"></u-input>
			</u-form-item>

			<u-form-item label="户籍所在地">
				<u-select v-model="huji_show" mode="mutil-column-auto" :list="list" @confirm="huji_confirm"></u-select>
				<u-input :border=false type="select" :select-open="huji_show" v-model="huji_region" placeholder="请选择地区"
					@click="huji_show = true"></u-input>
			</u-form-item>
			<u-form-item label="户口性质">
				<u-input type="select" :select-open="hukou_show" v-model="hukou_value" placeholder="请选择户口性质"
					@click="hukou_show = true"></u-input>
				<u-action-sheet :list="hulou_list" v-model="hukou_show" @click="hukou_callback"></u-action-sheet>
			</u-form-item>

			<u-form-item label="社保缴纳基数">
				<u-input />
			</u-form-item>

			<u-form-item label="公积金缴纳基数">
				<u-input />
			</u-form-item>

			<u-form-item label="社保缴纳月份">
				<u-radio-group>
					<u-radio shape="circle"
						v-for="(item, index) in [{'name':'1个月'},{'name':'3个月'},{'name':'6个月'},{'name':'12个月'}]"
						:key="index" :name="item.name">
						{{ item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>


			<!-- 
			<u-form-item label="公积金缴纳月份">
				<u-radio-group>
					<u-radio shape="circle" v-for="(item, index) in [{'name':'10月份'},{'name':'11月份'},{'name':'12月份'}]" :key="index" :name="item.name">
						{{ item.name}}</u-radio>
				</u-radio-group>
			</u-form-item> -->
		</u-form>
		<view>
			<view>明细</view>
			<view>服务费:66元(33元 * 3个月 * 97折)</view>
			<view>个人养老:89元(33元 * 12 * 2)</view>
			<view>企业养老:89元(33元 * 12 * 2)</view>
			<view>总计：333元</view>

			<label>
				<checkbox value="checkbox" checked=""/><text>我同意用户协议</text>  
			</label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				desc: '',
				hukou_value: '',
				show: false,
				huji_show: false,
				region: '',
				huji_region: '',
				labelPosition: 'left',
				form: {
					name: '',
					card: '',
					phoneNumber: '',
					email: '',
					email: ''
				},
				list: [{
					value: 8,
					label: '广东',
					children: [{
						value: 9,
						label: '广州市',
						children: [{
							value: 10,
							label: '天河区'
						}, {
							value: 11,
							label: '越秀区'
						}]
					}]
				}, {
					value: 1,
					label: '北京',
					children: [{
							value: 2,
							label: '朝阳区',
							children: [{}]
						},
						{
							value: 5,
							label: '通州',
							children: [{}]
						},
						{
							value: 6,
							label: '东城',
							children: [{}]
						},
						{
							value: 7,
							label: '西城',
							children: [{}]
						}
					]
				}],
				hukou_show: false,
				hulou_list: [{
						text: '本地城镇'
					},
					{
						text: '本地农村'
					},
					{
						text: '外阜城镇'
					},
					{
						text: '外阜农村'
					}
				]
			};
		},
		methods: {
			canbao_confirm(e) {
				console.info(e);
				this.region = '';
				e.map((val, index) => {
					this.region += this.region == '' ? val.label : '-' + val.label;
				})
			},
			huji_confirm(e) {
				console.info(e);
				this.huji_region = '';
				e.map((val, index) => {
					this.huji_region += this.huji_region == '' ? val.label : '-' + val.label;
				})
			},
			hukou_callback(index) {
				uni.hideKeyboard();
				this.hukou_value = this.hulou_list[index].text;
			}
		}
	};
</script>
